//JD轮播图
window.onload = function () {
	var
		oBox		= $('box'),
		oBtnList 	= $('btn-list'),
		aBtnListA 	= byTagName(oBtnList, 'a'),
		oImagesList = $('images-list'),
		aImagesListLi = byTagName(oImagesList, 'li'),
		oDirectionBtn = $('direction-btn'),
		oLeftBtn 	= $('left-btn'),
		oRightBtn 	= $('right-btn');

	var
		iIndex = 0, // 索引所有的索引都一对一对应时，可以设为全局变量
		iTimer = null; // 存储定时器的返回值

	// 给每个a链接按钮添加mouseover事件
	for(var i = 0; i < aBtnListA.length; i++) {
		aBtnListA[i].index = i;
		aBtnListA[i].onmouseover = function () {
			// 更新iIndex
			iIndex = this.index;//直接使用iIndex,iIndex会改变，相当于重新赋值
			// 默认让所有的li隐藏
		showImage();
		}
	}

	// 给box添加mouseenter事件
	oBox.onmouseenter = function () {
		oDirectionBtn.style.display = 'block';
		clearInterval(iTimer);
	}

	// 给box添加mouseleave事件
	oBox.onmouseleave = function () {
		oDirectionBtn.style.display = 'none';
		iTimer = setInterval(move, 3000);
	}

	// 自动往右跑
	iTimer = setInterval(move, 3000);


	// 给left添加click事件
	oLeftBtn.onclick = function () {
		iIndex--;
		// 左侧临界点的判断
		if(iIndex < 0) {
			iIndex = aImagesListLi.length - 1;
		}
		// 默认让所有的li隐藏
		showImage();
	}

	// 给right添加click事件
	oRightBtn.onclick = function () {
		iIndex++;
		// 右侧临界点的判断
		if(iIndex === aImagesListLi.length) {
			iIndex = 0;
		}
		// 默认让所有的li隐藏
		showImage();
	}


	// 通过ID获取DOM对象
	function $(id) {
		return document.getElementById(id);
	}

	// 通过标签名称获取某个对象下面的DOM节点列表
	function byTagName(obj, sTagName) {
		return obj.getElementsByTagName(sTagName);
	}
	function showImage(){
		for(var j = 0; j < aImagesListLi.length; j++) {
			bufferMove(aImagesListLi[j], {opacity:0},function () {
				this.style.display = 'none';
			});
			// 默认清空掉className
			aBtnListA[j].className = '';
		}
		// 让当前对应的li做显示运动
		aImagesListLi[iIndex].style.display = 'block';
		bufferMove(aImagesListLi[iIndex], {opacity: 100});

		// 给当前按钮添加className
		aBtnListA[iIndex].className = 'hover';
	}
	function move(){
		iIndex++;
		// 右侧临界点的判断
		if(iIndex === aImagesListLi.length) {
			iIndex = 0;
		}
		// 默认让所有的li隐藏
		showImage();
	}
}